<template>
	<div id="orgAnalysis">
		<div class="chart-item">
			<!-- 预约统计区域图 -->
			<div class="stackedBar">
				<v-chart :id="'stackedBar'" :data="option1" style="height: 380px;"></v-chart>
				<div v-show="noData1 == true" class="noData" >
					<img src="../assets/img/noData.png" alt="">
					<p>暂无数据</p>
				</div>
				<ul class="info">
					<li>预约总数：{{appoDataCount.appoTotal}}</li>
					<li>赴约数：{{appoDataCount.keepCount}}</li>
					<li>取消数：{{appoDataCount.cancelCount}}</li>
					<li>爽约数：{{appoDataCount.breakCount}}</li>
				</ul>
				<h2 class="chartName">预约统计</h2>
				<div class="selectArr">
					<el-select v-model="form1.years" placeholder="年" class="custom-select"  @change="changeYear1($event)">
						<el-option v-for="(item,index) in years" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select clearable v-model="form1.months" placeholder="月" class="custom-select"  @change="changeMonth1($event)">
						<el-option v-for="(item,index) in months" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select :disabled="disabled1" clearable v-model="form1.days" placeholder="日" class="custom-select" @change="changeDay1($event)">
						<el-option v-for="(item,index) in days" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</div>
			</div>
		</div>
		<div class="chart-item">
			<!-- 业务预约统计 -->
			<div class="stackedLine">
				<v-chart :id="'stackedLine'" :data="option2" style="height: 380px;"></v-chart>
				<div v-show="noData2 == true" class="noData">
					<img src="../assets/img/noData.png" alt="">
					<p>暂无数据</p>
				</div>
				<ul class="info">
					<li v-for="item in orgAppointBusinessCount">{{item.bName}}:{{item.bTotal}}</li>
				</ul>
				<h2 class="chartName">业务预约统计</h2>
				<div class="selectArr">
					<el-select v-model="form2.years" placeholder="年" class="custom-select"  @change="changeYear2($event)">
						<el-option v-for="(item,index) in years" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select clearable v-model="form2.months" placeholder="月" class="custom-select"  @change="changeMonth2($event)">
						<el-option v-for="(item,index) in months" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select :disabled="disabled2" clearable v-model="form2.days" placeholder="日" class="custom-select"  @change="changeDay2($event)">
						<el-option v-for="(item,index) in days" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</div>
			</div>
		</div>
		<div class="chart-item">
			<!-- 业务办理统计 -->
			<div class="stackedBar">
				<v-chart :id="'stackedBar2'" :data="option3" style="height: 380px;"></v-chart>
				<div v-show="noData3 == true" class="noData" >
					<img src="../assets/img/noData.png" alt="">
					<p>暂无数据</p>
				</div>
				<ul class="info">
					<li>办理业务总数：{{orgBusinessBanliCount.bTotal}}</li>
					<li>预约办理业务：{{orgBusinessBanliCount.appoBTTotal}}</li>
					<li>非预约办理业务：{{orgBusinessBanliCount.offBTTotal}}</li>
				</ul>
				<h2 class="chartName">业务办理统计</h2>
				<div class="selectArr">
					<el-select v-model="form3.years" placeholder="年" class="custom-select"  @change="changeYear3($event)">
						<el-option v-for="(item,index) in years" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select clearable v-model="form3.months" placeholder="月" class="custom-select"  @change="changeMonth3($event)">
						<el-option v-for="(item,index) in months" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select :disabled="disabled3" clearable v-model="form3.days" placeholder="日" class="custom-select"  @change="changeDay3($event)">
						<el-option v-for="(item,index) in days" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</div>
			</div>
		</div>
		
		<div class="chart-item" style="position: relative;">
			<div class="selectArr">
				<el-select v-model="form4.years" placeholder="年" class="custom-select"  @change="changeYear4($event)">
					<el-option v-for="(item,index) in years" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
				<el-select clearable v-model="form4.months" placeholder="月" class="custom-select"  @change="changeMonth4($event)">
					<el-option v-for="(item,index) in months" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
				<el-select :disabled="disabled4" clearable v-model="form4.days" placeholder="日" class="custom-select"  @change="changeDay4($event)">
					<el-option v-for="(item,index) in days" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
			</div>
			<div v-show="noData4 == true" class="noData" style="top: 50px;">
				<img src="../assets/img/noData.png" alt="">
				<p>暂无数据</p>
			</div>
			<div class="barChart" >
				<v-chart :id="'barChart'" :data="option4" style="height: 350px;"></v-chart>
			</div>
			<div class="right">
				<div class="gaugeChart"  style="position: relative;">
					<ul class="eInfo">
						<li>评价总数：{{evaluateData.evaluateTotal}}</li>
						<li>未评价：{{evaluateData.notEvaluateTotal}}</li>
						<li>非常满意：{{evaluateData.allGCount}}</li>
						<li>一般：{{evaluateData.allGenCount}}</li>
						<li>不满意：{{evaluateData.allBCount}}</li>
					</ul>
					<v-chart :id="'gaugeChart'" :data="option5" style="height: 235px;"></v-chart>
					<div class="tipsData">
						<div class="item">{{gCount}}</div>
						<div class="item">{{genCount}}</div>
						<div class="item">{{bCount}}</div>
					</div>
				</div>
				<div class="source">
					<h4>评价来源：</h4>
					<div class="progress">
						<div class="wxd" :style="{width: evaluateData.onlineEvaluationSource + '%'}"></div>
						<div class="pjq" :style="{width: evaluateData.offlineEvaluationSource + '%'}"></div>
					</div>
					<div class="source-name">
						<span>微信端 {{evaluateData.onlineEvaluationSource}}%</span>
						<span>评价器 {{evaluateData.offlineEvaluationSource}}%</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import vChart from "./view/chart.vue"
	import {years,orgAppoint,orgAppointBusiness,orgBusinessProp,orgComment} from '../api/getData.js'
	export default {
		name: 'orgAnalysis',
		components: {
			vChart
		},
		data() {
			return {
				option1: {
					tooltip : {
						trigger: 'axis',
						axisPointer : {          
							type : 'shadow' 
						}
					},
					legend: {
						data:['赴约次数','取消次数','爽约次数'],
						bottom:0,
						padding:[0,10],
						itemGap:30
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '8%',
						containLabel: true
					},
					xAxis : [
						{
							type : 'category',
							name:'单位',
							data : [],
							axisLabel: {
								interval:0
							}
						}
					],
					yAxis : [
						{
							type : 'value',
							name:'预约（次数）',
							nameGap:30,
							axisLine:{
								show:false
							},
							axisTick:{
								show:false
							},
							splitLine:{
						　　 	lineStyle:{
									type:'dashed'
								}
						　　}
						}
					],
					color: ['#328EF9', '#F7AC60', '#d2d2d2'],
					series : [
						{
							name:'赴约次数',
							type:'bar',
							barWidth : 30,
							stack: '预约统计',
							data:[]
						},
						{
							name:'取消次数',
							type:'bar',
							stack: '预约统计',
							data:[]
						},
						{
							name:'爽约次数',
							type:'bar',
							stack: '预约统计',
							data:[]
						}
					]
				},
				option2: {
					tooltip : {
						formatter: function(v){
							let temp = v[0].name
							v.filter(s => s.value).forEach(s => temp += `<br/>  ${s.marker} ${s.seriesName} ${s.value}`)
							return temp
						},
						trigger: 'axis',
						axisPointer : {            // 坐标轴指示器，坐标轴触发有效
							type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: {
						data:[],
						bottom:0,
						padding:[0,10],
						itemGap:30
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '8%',
						containLabel: true
					},
					xAxis : [
						{
							type : 'category',
							name:'单位',
							data : [],
							axisLabel: {
								interval:0
							}
						}
					],
					yAxis : [
						{
							type : 'value',
							name:'业务预约（次数）',
							nameGap:30,
							axisLine:{
								show:false
							},
							axisTick:{
								show:false
							},
							splitLine:{
						　　 	lineStyle:{
									type:'dashed'
								}
						　　}
						}
					],
					color: ['#565ADE','#328EF9','#3ED0B9','#9C6DE2','#FBB730','#FB8830'],
					series : []
				},
				option3: {
					tooltip : {
						trigger: 'axis',
						axisPointer : {            
							type : 'shadow'       
						},
						formatter: function(v){
							let temp = v[0].name
							v.filter(s => s.value).forEach(s => temp += `<br/>  ${s.marker} ${s.seriesName} ${s.value}`)
							return temp
						}
					},
					legend: {
						data:[],
						bottom:0,
						padding:[0,10],
						itemGap:30
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '8%',
						containLabel: true
					},
					xAxis : [
						{
							type : 'category',
							name:'单位',
							data : [],
							axisLabel: {
								interval:0
							}
						}
					],
					yAxis : [
						{
							type : 'value',
							name:'业务办理（次数）',
							nameGap:30,
							axisLine:{
								show:false
							},
							axisTick:{
								show:false
							},
							splitLine:{
						　　 	lineStyle:{
									type:'dashed'
								}
						　　}
						}
					],
					color: ['#565ADE','#328EF9','#3ED0B9','#9C6DE2','#FBB730','#FB8830'],
					series : []
				},
				option4: {
					title: {
						text: '用户评价统计'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						show: true,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						position: 'top',
					},
					yAxis: {
						show: true,
						type: 'category',
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						data : []
					},
					color: ["#0088FE", '#F9CB76', '#F65B59'],
					series: []
				},
				option5: {
					tooltip: {
						formatter: " 满意度 <br/>{b} ：{c} "
					},
					series: [{
							name: '非常满意',
							type: 'gauge',
							center: ['20%', '50%'],
							radius: '60%',
							axisLine: {
								lineStyle: {
									width:14,
								}
							},
							axisTick: {
								length: 12,
								lineStyle: {
									color: 'auto'
								}
							},
							splitLine: {
								length: 10,
								lineStyle: {
									color: 'auto'
								}
							},
							pointer: {
								width: 5
							},
							title: {
								offsetCenter: [0, '70%'],
							},
							itemStyle:{
								color:'#09ceb0'
							},
							axisLine: {
								lineStyle: {
									width:14,
									color: [
										[0.65, '#09ceb0'],
										[1, '#EEE']
									]
								},
							},
							axisLabel: {
								show: false
							},
							detail: {
								show: false,
								color: "#333",
								fontSize: '24',
								offsetCenter:[0,'120%']
							},
							data: []
						},
						{
							name: '一般',
							type: 'gauge',
							center: ['50%', '50%'],
							radius: '60%',
							axisTick: {
								length:0
							},
							splitLine: {
								length: 10,
								lineStyle: {
									color: 'auto',
								}
							},
							axisLabel: {
								show: false
							},
							pointer: {
								width: 5
							},
							title: {
								offsetCenter: [0, '70%'], // x, y，单位px
							},
							itemStyle:{
								color:'#f7b869'
							},
							axisLine: {
								lineStyle: {
									width:14,
									color: [
										[0.4, '#f7b869'],
										[1, '#EEE']
									]
								}
							},
							detail: {
								show: false,
								color: "#333",
								fontSize: '24',
								offsetCenter:[0,'120%']
							},
							data: []
						},
						{
							name: '不满意',
							type: 'gauge',
							radius: '60%',
							center: ['80%', '50%'],
							axisTick: {
								length: 10,
								lineStyle: {
									color: 'auto'
								}
							},
							splitLine: {
								length: 10,
								lineStyle: {
									color: 'auto'
								}
							},
							pointer: {
								width: 5,
							},
							itemStyle:{
								color:'#f6605f'
							},
							axisLine: {
								lineStyle: {
									width:14,
									color: [
										[0.25, '#f6605f'],
										[1, '#EEE'],
									]
								},
							},
							title: {
								offsetCenter: [0, '70%'],
							},
							axisLabel: {
								show: false
							},
							detail: {
								show: false,
								color: "#333",
								fontSize: '24',
								offsetCenter:[0,'120%']
							},
							data: []
						},
					]
				},
				organId:window.sessionStorage.getItem('organid'),
				form1:{
					years: new Date().getFullYear(),
					months:''
				},
				form2:{
					years: new Date().getFullYear(),
					months:'',
				},
				form3:{
					years: new Date().getFullYear(),
					months:'',
					days:'',
				},
				form4:{
					years: new Date().getFullYear(),
					months:'',
					days:'',
				},
				years:[],
				months:[],
				days:[],
				disabled1:true,
				disabled2:true,
				disabled3:true,
				disabled4:true,
				appoDataCount:{},//预约统计次数
				orgAppointBusinessCount:[],//机构业务预约统计
				orgBusinessBanliCount:{},//业务办理统计
				evaluateData:{},//评价数据
				progress:{
					wx:'',
					pjq:''
				},
				gCount:0,
				genCount:0,
				bCount:0,
				noData1:true,
				noData2:true,
				noData3:true,
				noData4:true
			}
		},
		computed: {

		},
		created() {
			this.getTimeJson()
			this.orgAppoint(this.form1.years)
			this.orgAppointBusiness(this.form2.years)
			this.orgBusinessProp(this.form3.years)
			this.orgComment(this.form4.years)
		}, // 创建时
		beforeMount: function() {}, // 挂载之前
		mounted: function() {}, // 挂载之后
		beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
		updated: function() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed: function() {}, // 实例销毁后调用
		methods: {
			getTimeJson(){
				var date=new Date();//创建日期对象
				var year=date.getFullYear();//获取当前年份
				for(var i=2018;i<=year;i++){//在id为year的selector附加option选项
						this.years.push(i)
				}
				for(var j=1;j<=12;j++){
					if(j<10){
						j= '0'+ j
					}
					this.months.push(j)
				}
			},
			getTime(yearMonth){
				years({
					appoDate:yearMonth
				}).then((res)=>{
					console.log(res,"日期")
					if(res.data.code == 0){
						this.days = res.data.data
					}else{
						this.$message.error(res.data.msg)
					}
				}).catch((error) =>{
					console.log(error)
				})
			},
			changeYear1(val){
				this.form1.years = val
				this.orgAppoint(val)
			},
			changeMonth1(val){
				// console.log(this.form1.years + '-' + val,'年月')
				if(Number(val) == 0){
					this.form1.days = ''
					this.disabled1 = true
					this.orgAppoint(this.form1.years)
				}else{
					this.disabled1 = false
					this.getTime(this.form1.years + '-' + this.form1.months)
					this.orgAppoint(this.form1.years + '-' + val)
				}
			},
			changeDay1(val){
				this.form1.days = val
				if(Number(val) == 0 && Number(this.form1.months) != 0){
					this.orgAppoint(this.form1.years + '-' + this.form1.months)
				}else if(Number(val) == 0 && Number(this.form1.months) == 0){
					this.orgAppoint(this.form1.years)
				}else{
					this.orgAppoint(this.form1.years + '-' + this.form1.months + '-' + val)
				}
			},
			changeYear2(val){
				this.form2.years = val
				this.orgAppointBusiness(this.form2.years)
			},
			changeMonth2(val){
				console.log(this.form2.years + '-' + val,'年月')
				if(Number(val) == 0){
					this.form2.days = ''
					this.disabled2 = true
					this.orgAppointBusiness(this.form2.years)
				}else{
					this.disabled2 = false
					this.getTime(this.form2.years + '-' + this.form2.months)
					this.orgAppointBusiness(this.form2.years + '-' + val)
				}
			},
			changeDay2(val){
				this.form2.days = val
				if(Number(val) == 0 && Number(this.form2.months) != 0){
					this.orgAppointBusiness(this.form2.years + '-' + this.form2.months)
				}else if(Number(val) == 0 && Number(this.form2.months) == 0){
					this.orgAppointBusiness(this.form2.years)
				}else{
					this.orgAppointBusiness(this.form2.years + '-' + this.form2.months + '-' + val)
				}
			},
			changeYear3(val){
				this.form3.years = val
				this.orgBusinessProp(this.form3.years)
			},
			changeMonth3(val){
				if(Number(val) == 0){
					this.form3.days = ''
					this.disabled3 = true
					this.orgBusinessProp(this.form3.years)
				}else{
					this.disabled3 = false
					this.getTime(this.form3.years + '-' + this.form3.months)
					this.orgBusinessProp(this.form3.years + '-' + val)
				}
			},
			changeDay3(val){
				this.form3.days = val
				if(Number(val) == 0 && Number(this.form3.months) != 0){
					this.orgBusinessProp(this.form3.years + '-' + this.form3.months)
				}else if(Number(val) == 0 && Number(this.form3.months) == 0){
					this.orgBusinessProp(this.form3.years)
				}else{
					this.orgBusinessProp(this.form3.years + '-' + this.form3.months + '-' + val)
				}
			},
			changeYear4(val){
				this.form4.years = val
				this.orgComment(this.form4.years)
			},
			changeMonth4(val){
				if(Number(val) == 0){
					this.form4.days = ''
					this.disabled4 = true
					this.orgComment(this.form4.years)
				}else{
					this.disabled4 = false
					this.getTime(this.form4.years + '-' + this.form4.months)
					this.orgComment(this.form4.years + '-' + val)
				}
			},
			changeDay4(val){
				this.form4.days = val
				if(Number(val) == 0 && Number(this.form4.months)){
					this.orgComment(this.form4.years + '-' + this.form4.months)
				}else if(Number(val) == 0 && Number(this.form4.months) == 0){
					this.orgComment(this.form4.years)
				}else{
					this.orgComment(this.form4.years + '-' + this.form4.months + '-' + val)
				}
			},
			// 预约统计
			orgAppoint(time){
				orgAppoint({
					appoDate:time,
					organId:this.organId,
				}).then((res) =>{
					console.log(res.data,"---1--机构预约统计-----")
					if(res.data.code === 0){
						this.noData1 = false
						this.appoDataCount = res.data.data.dataCount
						let latticeName = []
						let keepArr = []
						let cancelArr = []
						let breakArr = []
						if(res.data.data.dataList){
							res.data.data.dataList.forEach((item,index)=>{
								latticeName.push(item.latticeName)
								keepArr.push(item.keepCount)
								cancelArr.push(item.cancelCount)
								breakArr.push(item.breakCount)
							})
						}
						this.option1 = {
							xAxis : [{type : 'category',name:'单位',data : latticeName}],
							series:[
								{name:'赴约次数',type:'bar',barWidth : 30,stack: '预约统计',data:keepArr},
								{name:'取消次数',type:'bar',barWidth : 30,stack: '预约统计',data:cancelArr},
								{name:'爽约次数',type:'bar',barWidth : 30,stack: '预约统计',data:breakArr}
							]
						}
					}else{
						this.noData1 = true
					}
				}).catch((error) =>{
					console.log(error)
				})
			},
			// 机构业务预约统计
			orgAppointBusiness(time){
				orgAppointBusiness({
					appoDate:time,
					organId:this.organId,
				}).then((res) =>{
					console.log(res.data,"----2--机构业务预约统计-----")	
					if(res.data.code == 0){
						this.noData2 = false
						this.orgAppointBusinessCount = res.data.data.dataCount
						let businArr=res.data.data.businNames
						let websiteArr = [];//网点数组
						var seriesArr=[];//Y轴数据
						let dArr = res.data.data.dataList
						dArr.forEach(v => {
							websiteArr.push(v.latticeName)
						})
						businArr.forEach((item,index)=>{
							let d = []
							dArr.forEach(v => {
								let sa = v.businessTypeArr.filter(sv => sv.bName === item)
								let tempA = 0
								if(sa[0]) {
									tempA = sa[0].bTotal
								}
								d.push(tempA)
							})
							let obj={
								name:item,
								type:'bar',
								stack: '预约统计',
								barWidth : 40,
								data:d
							}
							seriesArr.push(obj)
						})
						this.option2.xAxis = [{data : websiteArr}]
						this.option2.legend.data = businArr
						this.option2.series = seriesArr
					}else{
						this.noData2 = true
					}
				}).catch((error) =>{
					console.log(error)
				})
			},
			// 业务办理统计
			orgBusinessProp(time){
				orgBusinessProp({
					appoDate:time,
					organId:this.organId
				}).then((res) =>{
					console.log(res.data,"---3-业务办理统计-----")
					if(res.data.code == 0){
						this.noData3 = false
						this.orgBusinessBanliCount = res.data.data.dataCount
						let businArr=res.data.data.businNames
						let websiteArr = [];//网点数组
						var seriesArr=[];//Y轴数据
						let dArr = res.data.data.dataList
						dArr.forEach(v => {
							websiteArr.push(v.latticeName)
						})
						businArr.forEach((item,index)=>{
							let d = []
							dArr.forEach(v => {
								let sa = v.businessTypeArr.filter(sv => sv.bName === item)
								let tempA = 0
								if(sa[0]) {
									tempA = sa[0].bTotal
								}
								d.push(tempA)
							})
							let obj={
								name:item,
								type:'bar',
								stack: '预约统计',
								barWidth : 40,
								data:d
							}
							seriesArr.push(obj)
						})
						this.option3.legend.data = businArr
						this.option3.xAxis = [{data: websiteArr}]
						this.option3.series = seriesArr
					}else{
						this.noData3 = true
					}
				}).catch((error) =>{
					console.log(error)
				})
			},
			// 机构用户评价统计
			orgComment(time){
				orgComment({
					appoDate:time,
					organId:this.organId
				}).then((res) =>{
					console.log(res.data,"---4--机构用户评价统计-----")
					if(res.data.code === 0){
						this.noData4 = false
						this.evaluateData = res.data.data
						let latticeName = []
						let hArr = []
						let yArr =[]
						let bArr = []
						let eData = res.data.data.dataList.forEach(v =>{
							latticeName.push(v.latticeName)
							hArr.push(v.offGAndGCount)
							yArr.push(v.offGAndGenCount)
							bArr.push(v.offBAndBCount)
						})
						this.option4.yAxis.data = latticeName
						this.option4.series = [
							{name: '非常满意',type: 'bar',stack: '满意度',barWidth: 10,data: hArr},
							{name: '一般',type: 'bar',barWidth: 10,stack: '满意度',data: yArr},
							{name: '不满意',type: 'bar',stack: '满意度',barWidth: 10,data: bArr},
						]
						this.gCount = res.data.data.allGCount
						this.genCount = res.data.data.allGenCount
						this.bCount = res.data.data.allBCount
						this.option5.series =[
							{
								name:'非常满意',
								axisLine: {lineStyle: {width:14,color: [[res.data.data.gCountPercentage/100,'#09ceb0'],[1,'#EEE']]}},
								// detail: {detail: {formatter:'{'+ res.data.data.gCountPercentage +'}%'}},
								data:[{value:res.data.data.gCountPercentage,name: '非常满意'}]
							},
							{
								name: '一般',
								axisLine: {lineStyle: {width:14,color: [[res.data.data.genCountPercentage/100,'#f7b869'],[1,'#EEE']]}},
								// detail: {detail: {formatter:'{'+ res.data.data.genCountPercentage +'}%'}},
								data:[{value:res.data.data.genCountPercentage,name: '一般'}]
							},
							{
								name: '不满意',
								axisLine: {lineStyle: {width:14,color: [[res.data.data.bCountPercentage/100,'#f6605f'],[1,'#EEE']]}},
								// detail: {detail: {formatter:'{'+ res.data.data.bCountPercentage +'}%'}},
								data:[{value:res.data.data.bCountPercentage,name: '不满意'}]
							}
						]
					}else{
						this.noData4 = true
					}
				}).catch((error) =>{
					console.log(error)
				})
			}
		} 
	}
</script>
<style lang='scss'>
	#orgAnalysis {
		.noData{
			position: absolute;
			width: 100%;
			height: 380px;
			left: 0;
			top:40px;
			background: #fff;
			z-index: 999;
			padding: 80px 0;
			text-align: center;
			p{
				font-size: 16px;
				margin-top: 20px;
			}
		}
		.chart-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24px;
		}
		.selectArr{
			position: absolute;
			right: 60px;
			top: 12px;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.custom-select {
			width: 96px;
			height: 32px;
			margin-left: 10px;
			.el-input__inner {
				height: 32px;
				line-height: 32px;
			}
			.el-input__icon {
				line-height: 32px;
			}
		}
		.stackedBar,.stackedLine{
			width: 100%;
			height: 450px;
			background: #fff;
			position: relative;
			padding: 40px 20px;
			.chartName{
				position: absolute;
				font-weight: bold;
				font-size: 18px;
				left:28px;
				top: 20px;
			}
			.info{
				position: absolute;
				display: flex;
				align-items: center;
				top: 60px;
				right: 60px;
				font-size: 14px;
				color: #333;
				font-family: "Microsoft YaHei";
				li{
					margin-right: 10px;
				}
			}
		}
		
		.nestedChart {
			width: 60%;
			height: 368px;
			background: #fff;
			position: relative;
			padding: 16px;
		}

		.funnelChart,
		.annulusChart {
			width: 38%;
			height: 368px;
			background: #fff;
			padding: 16px 24px;
			position: relative;
		}

		.nestedChart {
			display: flex;
			align-items: center;
		}
		.s-item{
			em{
				display: inline-block;
				width:10px;
				height:10px;
				border-radius: 50%;
				background: #048AFE;
			}
			strong{
				border-right: 1px solid #ccc;
				padding: 0 8px;
			}
			span{
				padding-left:8px;
			}
		}
		.s-lists{
			padding: 8px 0 8px 32px;
			li{
				line-height: 1.6;
				span:nth-child(1){
					padding: 0 8px;
					border-right: 1px solid #ccc;
				}
				span:nth-child(2){
					padding: 0 8px;
				}
			}
		}
		.barChart,
		.right {
			width: 50%;
			height: 460px;
			padding: 16px 24px;
			background: #fff;
			.tipsData{
				padding: 0 5%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				top: 200px;
				.item{
					width:33%;
					flex: 1;
					font-size: 24px;
					color: #000;
					text-align: center;
				}
			}
			.eInfo{
				display: flex;
				justify-content: flex-end;
				font-size: 14px;
				margin-top: 40px;
				padding-right: 40px;
				li{
					margin-left: 10px;
					color: #333;
					font-family: "Microsoft YaHei";
				}
			}
			.source {
				h4 {
					color: #000;
				}
				.progress {
					width: 100%;
					height: 20px;
					background: #eee;
					display: flex;
					margin-top: 20px;
					font-size: 12px;
					.wxd {
						margin-bottom: 16px;
						height: 20px;
						background: #363A3E;
					}
					.pjq {
						width: 26%;
						text-align: right;
						height: 20px;
						background: #E2AC52;
						margin-bottom: 16px
					}
				}
				.source-name{
					margin-top: 10px;
					display: flex;
					width:100%;
					align-items: center;
					justify-content: space-between;
					font-size: 12px;
				}
			}
		}

	}
</style>
